<template>
  <view class="container">
    <div class="l-box flex-center">
      <view
        class="d-box flex-column"
        v-for="(item, i) in topData"
        :key="i"
        :class="{ line: i + 1 != topData.length }"
        @click="itemHandle(item)"
      >
        <text class="num">{{ item.value }}</text>
        <text class="title">{{ item.title }}</text>
        <text class="sub">{{ item.sub }}</text>
      </view>
    </div>
    <view class="data-box">
      <view class="my item">
        <view class="title flex-space-between">
          <text class="left"
            >今日新增商户数（人）：
            <text @click="showTip('today')" class="iconfont icon-bangzhu"></text
          ></text>
          <text class="right" @click="toDetail('today')"
            >全部 <text class="iconfont icon-Downarrow-R iconfont-right"></text
          ></text>
        </view>
        <view class="content flex-column">
          <template v-if="addMerchDetail.length">
            <view
              class="todayNewAddList flex-space-between"
              v-for="(item, i) in addMerchDetail"
              :key="i"
            >
              <text class="name"
                >{{ item.agentName
                }}<text
                  v-if="item.agentNo == user.agentNo"
                  class="iconfont icon-xiaoxi1 me"
                  ><text class="font">我</text></text
                ></text
              >
              <text class="value">{{ item.count }}</text>
            </view>
          </template>
          <view class="nodata" v-else>暂无数据</view>
        </view>
      </view>
      <view class="team item">
        <view class="title flex-space-between">
          <text class="left"
            >团队商户数（人）：
            <text @click="showTip('team')" class="iconfont icon-bangzhu"></text
          ></text>
          <text class="right" @click="toDetail('team')"
            >全部 <text class="iconfont icon-Downarrow-R iconfont-right"></text
          ></text>
        </view>
        <view class="content flex-column">
          <template v-if="merchDetailByTeam.length">
            <view
              class="todayNewAddList flex-space-between"
              v-for="(item, i) in merchDetailByTeam"
              :key="i"
            >
              <text class="name"
                >{{ item.agentName
                }}<text
                  v-if="item.agentNo == user.agentNo"
                  class="iconfont icon-xiaoxi1 me"
                  ><text class="font">我</text></text
                ></text
              >
              <text class="value">{{ item.count }}</text>
            </view>
          </template>
          <view class="nodata" v-else>暂无数据</view>
        </view>
      </view>
    </view>
    <view class="e-content">
      <view class="filter flex-space-between">
        <view class="brand">商户交易趋势图</view>
        <view class="type">
          <u-tabs
            active-color="#4286F5"
            :list="echartNavType"
            :is-scroll="false"
            bg-color="transparent"
            :current="navIndex1"
            @change="changeNav($event, 1)"
          ></u-tabs>
          <!-- <text v-for="(item, i) in echartNavType" :key="i" class="">{{item.text}}</text> -->
        </view>
      </view>
      <view class="echart">
        <qiun-data-charts
          v-if="line1Data.series[0].data.length > 0"
          :opts="line.opts"
          type="area"
          :chartData="line1Data"
        />
        <div class="timeType flex-center">
          <text
            v-for="(item, i) in timeType"
            :key="i"
            @click.stop="timeChange(1, item, i)"
            :class="{ active: timeActive1 == i }"
            >{{ item.name }}</text
          >
        </div>
      </view>
    </view>
    <view class="e-content">
      <view class="filter flex-space-between">
        <view class="brand">商户新增趋势图</view>
        <view class="type">
          <u-tabs
            active-color="#4286F5"
            :list="echartNavType"
            :is-scroll="false"
            bg-color="transparent"
            :current="navIndex2"
            @change="changeNav($event, 2)"
          ></u-tabs>
          <!-- <text v-for="(item, i) in echartNavType" :key="i" class="">{{item.text}}</text> -->
        </view>
      </view>
      <view class="echart">
        <qiun-data-charts
          v-if="line2Data.series[0].data.length > 0"
          :opts="line.opts"
          type="area"
          :chartData="line2Data"
        />
        <div class="timeType flex-center">
          <text
            v-for="(item, i) in timeType"
            :key="i"
            @click.stop="timeChange(2, item, i)"
            :class="{ active: timeActive2 == i }"
            >{{ item.name }}</text
          >
        </div>
      </view>
    </view>
    <!-- <view class="e-content">
      <view class="filter flex-space-between">
        <view class="brand">户均交易趋势图</view>
        <view class="type">
          <u-tabs
            active-color="#4286F5"
            :list="echartNavType"
            :is-scroll="false"
            bg-color="transparent"
            :current="navIndex2"
            @change="changeNav($event, 3)"
          ></u-tabs>
        </view>
      </view>
      <view class="echart">
        <qiun-data-charts
          v-if="line2Data.series[0].data.length > 0"
          :opts="line.opts"
          type="area"
          :chartData="line2Data"
        />
        <div class="timeType flex-center">
          <text
            v-for="(item, i) in timeType"
            :key="i"
            @click.stop="timeChange(2, item, i)"
            :class="{ active: timeActive2 == i }"
            >{{ item.name }}</text
          >
        </div>
      </view>
    </view> -->
  </view>
</template>
                                                                                 
<script>
import { totalTermIndex, merchTrxDetail, merchAddDetail } from "_a/data/merch";
export default {
  data() {
    return {
      query: {
        policyCode: "",
      },
      topData: [
        {
          title: "今日新增商户数(人)",
          value: 0,
          sub: "（本人）",
          key: "addMerchCountByOneSelf",
        },
        {
          title: "今日新增直推商户数(人)",
          value: 0,
          sub: "（直属团队）",
          key: "addMerchCountByUnder",
        },
        {
          title: "团队商户数(人)",
          value: 0,
          sub: "团队",
          key: "totalMerchCountByTeam",
        },
      ],
      echartNavType: [
        { name: "直属团队", value: "0" },
        { name: "团队", value: "1" },
        { name: "本人", value: "2" },
      ],
      timeType: [
        { name: "按日", value: "0" },
        { name: "按月", value: "1" },
        { name: "近一周", value: "2" },
      ],
      line: {
        opts: {
          color: ["#1890FF"],
          dataPointShapeType: "hollow",
          legend: {
            show: false,
          },
          xAxis: {
            labelCount: 8,
          },
          fontSize: "12",
          yAxis: {
            gridType: "dash",
            dashLength: 2,
          },
          extra: {
            area: {
              type: "curve",
              opacity: 0.2,
              addLine: true,
              width: 2,
              gradient: true,
            },
          },
        },
      },
      line1Data: {
        categories: [],
        series: [
          {
            name: "数量",
            data: [],
          },
        ],
      },
      line2Data: {
        categories: [],
        series: [
          {
            name: "数量",
            data: [],
          },
        ],
      },
      line3Data: {
        categories: [],
        series: [
          {
            name: "数量",
            data: [],
          },
        ],
      },
      ring: {
        opts: {
          dataLabel: false,
          extra: {
            ring: {
              border: false,
              linearType: "custom",
              ringWidth: 20,
            },
          },
          title: {
            name: "机具数量（台）",
            fontSize: 12,
            color: "#666666",
          },
          subtitle: {
            name: "7999",
            fontSize: 18,
            color: "#211F1F",
          },
          color: ["#0569FF", "#FFD800", "#FF8F17"],
        },
        series: [
          {
            data: [
              { name: "已激活", value: 50 },
              { name: "未激活", value: 30 },
              { name: "待下发", value: 20 },
            ],
          },
        ],
      },
      navIndex1: 0,
      navIndex2: 0,
      navIndex3: 0,
      timeActive1: 0, //时间下标
      timeActive2: 0, //时间下标
      timeActive3: 0, //时间下标
      addMerchDetail: [], //当天 新增商户数明细
      merchDetailByTeam: [], //团队商户数明细
      tipText: "",
    };
  },
  async onPullDownRefresh() {
    await this.initData();
    uni.stopPullDownRefresh();
    this.$tip.toast("刷新成功!", "success", 500);
  },

  onLoad() {
    this.initData();
  },
  computed: {
    user() {
      return this.$store.getters.user || {};
    },
  },
  methods: {
    async initData() {
      // this.ringData.series[0].data = [];
      this.line1Data.series[0].data = [];
      this.line2Data.series[0].data = [];
      await this.getEchartData1();
      await this.getEchartData2();
      await this.getTotal();
    },
    // 获取数据
    getTotal() {
      // 本人
      totalTermIndex({
        policyCode: this.query.policyCode,
        agentType: 1,
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.topData = this.formData(this.topData, data);
          // 头部上的数据
          this.addMerchDetail = data.addMerchDetail;
          this.merchDetailByTeam = data.merchDetailByTeam;
        }
      });
    },
    // 格式化请求赋值参数
    formData(list, data) {
      list = list.map((subItem) => {
        subItem.value = data[subItem.key];
        return subItem;
      });
      return list;
    },
    changeNav(i, type) {
      // console.log(type, i);
      switch (type) {
        case 1:
          this.navIndex1 = i;
          this.getEchartData1();
          break;
        case 2:
          this.navIndex2 = i;
          this.getEchartData2();
          break;
        case 3:
          this.navIndex3 = i;
          this.getEchartData3();
          break;
        default:
          break;
      }
    },
    timeChange(key, item, i) {
      switch (key) {
        case 1:
          this.timeActive1 = i;
          this.getEchartData1();
          break;
        case 2:
          this.timeActive2 = i;
          this.getEchartData2();
          break;
        case 3:
          this.timeActive3 = i;
          this.getEchartData3();
          break;
        default:
          break;
      }
    },
    getEchartData1() {
      merchTrxDetail({
        agentType: this.echartNavType[this.navIndex1].value,
        queryDateType: this.timeType[this.timeActive1].value,
        policyCode: this.query.policyCode,
      }).then((res) => {
        if (res.code == 200) {
          let line = res.data;
          this.line1Data.categories = line.map((item) => {
            item = item.date.slice(-2);
            return item;
          });
          // console.log(this.line1Data);
          this.line1Data.series[0].data = line.map((item) => item.amount);
        }
      });
    },
    getEchartData2() {
      merchAddDetail({
        agentType: this.echartNavType[this.navIndex2].value,
        queryDateType: this.timeType[this.timeActive2].value,
        policyCode: this.query.policyCode,
      }).then((res) => {
        if (res.code == 200) {
          let line = res.data;
          this.line2Data.categories = line.map((item) => {
            item = item.date.slice(-2);
            return item;
          });
          // console.log(this.line2Data);
          this.line2Data.series[0].data = line.map((item) => item.count);
        }
      });
    },
    getEchartData3() {
      merchTrxDetail({
        agentType: this.echartNavType[this.navIndex3].value,
        queryDateType: this.timeType[this.timeActive3].value,
        policyCode: this.query.policyCode,
      }).then((res) => {
        if (res.code == 200) {
          let line = res.data;
          this.line3Data.categories = line.map((item) => {
            item = item.date.slice(-2);
            return item;
          });
          // console.log(this.line2Data);
          this.line3Data.series[0].data = line.map((item) => item.amount);
        }
      });
    },
    // 提示
    showTip(type) {
      // console.log(123);
      switch (type) {
        case "today":
          this.$tip.toast("该功能统计本人及直属下级团队数据的新增商户数");
          break;
        case "team":
          this.$tip.toast("该功能统计本人及直属下级团队的商户数");
          break;
        default:
          break;
      }
    },
    // 跳转全部
    toDetail(type) {
      let url = "";
      switch (type) {
        case "today":
          url = "/pages/home/data/merch?type=data-merch";
          break;
        case "team":
          url = "/pages/home/home/merch-info";
          break;
        default:
          break;
      }
      this.$nav.push({ path: url });
    },
  },
};
</script>

<style lang="scss">
.container {
  padding-bottom: R(50);
}
.l-box {
  margin-bottom: R(26);
  justify-content: space-between;
  background: #4286f5;
  margin: R(30) R(25) R(20);
  box-shadow: 0px R(5) R(21) R(3) rgba(13, 133, 244, 0.14);
  border-radius: R(10);
  height: R(220);
  color: #fff;
  text-align: center;
  .d-box {
    width: 33%;
    text-align: center;
  }
  .num {
    font-size: R(36px);
    font-family: Source Han Sans CN;
    // font-weight: bold;
    margin-bottom: R(30);
  }
  .title {
    font-size: R(20px);
    font-family: Source Han Sans CN;
    font-weight: 400;
    margin-top: auto;
    white-space: nowrap;
  }
  .sub {
    @extend .title;
    height: R(30);
  }
  .line {
    position: relative;
  }
  .line::after {
    content: "";
    position: absolute;
    background: #eee;
    width: 1px;
    height: R(26);
    right: 0;
    top: R(40);
  }
}
.data-box {
  margin: R(0) R(25) 0;
  > view {
    margin-top: R(24);
    padding: R(24) R(22);
    background: #ffffff;
    border-radius: R(20px);
    box-shadow: 0px R(17px) R(16px) 0px rgba(11, 51, 116, 0.19);
  }
  .item {
    .title {
      align-items: center;
      margin-bottom: R(10);
    }
    .left {
      font-size: R(28);
    }
    .right {
      font-size: R(26);
    }
    .content {
      .nodata {
        text-align: center;
        color: #999;
        padding-top: R(30);
      }
      .name {
        .me {
          position: relative;
          color: #f3e8a1;
          font-size: R(46);
          .font {
            position: absolute;
            left: R(20);
            top: R(10);
            font-size: R(20);
            color: #000;
          }
        }
      }
      font-size: R(26);
      .todayNewAddList {
        padding: R(15) R(70) R(15) R(10);
      }
    }
  }
  .team {
  }
}
.e-content {
  padding: R(6) R(25) 0;
  margin: R(20) R(25) 0;
  height: R(591px);
  background: #ffffff;
  box-shadow: 0px R(17px) R(16px) 0px rgba(11, 51, 116, 0.19);
  border-radius: R(20px);
  .filter {
    font-size: R(28px);
    font-weight: 400;
    color: #000000;
    margin-bottom: R(20);
    .type {
      width: R(400);
    }
  }
  .echart {
    width: 100%;
    height: 190px;
  }
  .timeType {
    margin-top: R(20);
    text:nth-child(2) {
      margin: 0 R(16) 0 R(16);
    }
    text {
      width: R(147);
      height: R(60);
      line-height: R(60);
      text-align: center;
      background: #fafafa;
      border-radius: R(30);
    }
    .active {
      background: #cee1ff;
      color: #4286f5;
    }
  }
}
</style>
